<!--
 * @Author: [kangjie]
 * @Date: 2022-05-05 10:04:01
 * @LastEditors: [kangjie]
 * @LastEditTime: 2022-05-05 12:55:52
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./1-vue3.js"></script>
</head>

<body>
  <div id="app">
    <!-- 文本插值 -->
    {{msg}}
    <!-- vue2 和 vue3区别 -->
    <!-- 
      1.vue3的实例不再在构造函数创建的 而是vue应用
    
      -->
  </div>
  <script>
    //  1.创建vue应用
    let app = Vue.createApp({
      data() {
        return {
          msg: 'hello vue3'
        }
      },
    });
    // 2.vue应用与模板绑定
    // 与模板进行绑定
    app.mount('#app');

      // 防抖/节流（优化高频率js代码执行的一种手段）
        // 原理:在一定时间内 代码只执行一次 setTimeout
        // 原理: 在一定时间间隔 代码执行一次
        // vue3生命周期
        // beforeCreate
        //   实例初始化之前 完成事件和生命周期初始化
        // created （data和methods）
        //   vnode 虚拟dom
        //   vue对象初始化 ,数据劫持（数据具有响应式）
        // beforeMount
        //   vm.$el [render函数产生的dom节点 node]
        // mounted
        //   替换完成
        // beforeUpdate
        // updated
        // beforeUnmount
        // unmounted

  </script>
</body>

</html>